<template>
    <PageLayout>
        <div style="width: 100%">
            <div class="search-h">
                <div style="flex: 1">
                    <a-form
                        layout="horizontal"
                        :form="queryParams"
                    >
                        <a-row>
                            <a-col
                                :md="12"
                                :sm="24"
                            >
                                <a-form-item
                                    label="标题"
                                    :label-col="{ span: 5 }"
                                    :wrapper-col="{ span: 18, offset: 1 }"
                                >
                                    <a-input
                                        v-model="queryParams.name"
                                        placeholder="输入标题"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div>
                    <a-button
                        type="primary"
                        @click="query"
                    >
                        查询
                    </a-button>
                </div>
            </div>
            <div class="btn-group">
                <a-button @click="add">
                    新增
                </a-button>
                <a-button @click="del">
                    删除
                </a-button>
                <a-button @click="reset">
                    重置
                </a-button>
            </div>
            <a-table
                row-key="recommendId"
                :row-selection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange: onSelectChange,
                }"
                :scroll="{ x: 900 }"

                :columns="columns"
                :data-source="data"
                :pagination="pageParams"
                @change="tableChange"
            >
                <template
                    slot="status"
                    slot-scope="rows, record"
                >
                    <a-switch
                        :checked="Boolean(record.status)"
                        checked-children="已推送"
                        un-checked-children="未推送"
                        @change="onSwitch($event,record)"
                    />
                </template>
                <template
                    slot="operation"
                    slot-scope="rows, record"
                >
                    <a-popover trigger="click">
                        <template
                            slot="content"
                        >
                            <a-spin
                                v-if="imgLoading"
                                style="width: 100px; height: 100px; line-height: 100px"
                            >
                                <a-icon
                                    slot="indicator"
                                    type="loading"
                                    style="font-size: 24px; "
                                    spin
                                />
                            </a-spin>
                            <img
                                v-else
                                width="100px"
                                height="100px"
                                :src="qrcodeImg"
                            >
                        </template>
                        <a-icon
                            type="tablet"
                            itle="发布"
                            style="color: #54c61c"
                            @click="review(record)"
                        />
                    </a-popover>
                    &nbsp;
                    <a-icon
                        class="edit"
                        type="setting"
                        theme="filled"
                        @click="edit(record)"
                    />
                    <a-icon
                        type="delete"
                        theme="filled"
                        @click="del(record)"
                    />
                </template>
            </a-table>

            <!-- 新增-编辑 -->
            <a-modal
                v-model="visible"
                :title="title"
            >
                <a-form-model
                    ref="ruleForm"
                    layout="horizontal"
                    :model="form"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 12 }"
                    :rules="rules"
                >
                    <a-form-model-item
                        label="标题"
                        prop="title"
                    >
                        <a-input
                            v-model="form.title"
                            placeholder="请输入标题"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="说明">
                        <a-textarea
                            v-model="form.content"
                            placeholder="请输入说明内容"
                            :rows="4"
                        />
                    </a-form-model-item>
                    <a-form-model-item
                        label="关联事项"
                        prop="matterId"
                    >
                        <a-select
                            v-model="form.matterId"
                            placeholder="请选择关联事项"
                        >
                            <a-select-option
                                v-for="item in matterList"
                                :key="item.matter"
                                :value="item.matterId"
                            >
                                {{ item.matter }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                        label="推送时间"
                        prop="pushTime"
                    >
                        <a-date-picker
                            v-model="form.pushTime"
                            :format="formatDate"
                            show-time
                            placeholder="请选择时间"
                            @change="onChange"
                            @ok="onOk"
                        />
                    </a-form-model-item>
                </a-form-model>
                <template slot="footer">
                    <a-button
                        type="primary"
                        @click="handleOk"
                    >
                        确定
                    </a-button>
                    <a-button @click="handleCancel">
                        取消
                    </a-button>
                </template>
            </a-modal>
        </div>
    </PageLayout>
</template>
<script>
import PageLayout from '@/views/common/PageLayout';

import moment from 'moment';
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        width: 120
    },
    {
        title: '说明',
        dataIndex: 'content',
        width: 120
    },
    {
        title: '关联事项',
        dataIndex: 'matter',
        width: 120
    },
    {
        title: '推送时间',
        dataIndex: 'pushTime',
        width: 120
    },
    {
        title: '状态',
        key: 'status',
        scopedSlots: { customRender: 'status' },
        dataIndex: 'status',
        width: 120
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 120
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        width: 120
    },
    {
        title: '操作',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
        dataIndex: 'operation',
        width: 120,
        fixed: 'right'
    }
];

export default {
    components: {PageLayout},
    data() {
        let formatDate = 'YYYY-MM-DD HH:mm:ss';
        return {
            imgLoading: false,
            qrcodeImg: '',
            formatDate,
            moment,
            matterList: [],
            visible: false,
            title: '新增',
            queryParams: {
                name: ''
            },
            pageParams: {
                current: 1,
                pageSize: 10,
                total: 0,
                'show-size-changer': true
            },
            form: {
                title: '',
                content: '',
                matterId: undefined,
                pushTime: undefined
            },
            rules: {
                title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                matterId: [{ required: true, message: '请选择关联事项', trigger: 'blur' }],
                pushTime: [{ required: true, message: '请选择推送时间', trigger: 'blur' }]
            },
            data: [],
            columns,
            selectedRowKeys: [], // Check here to configure the default column
            loading: false
        };
    },
    created() {
        this.$api.recommend.matterList().then(res => {
            this.matterList = res.data.data;
        });
        this.getList();
    },
    methods: {
        async review(record) {
            this.imgLoading = true;
            let res = await this.$api.matter.qrcode({
                'page': 'pages/home/home',
                'sceneStr': 'normal'
            });
            this.qrcodeImg = res;
            this.imgLoading = false;
            console.log('结果', res);
        },
        async onSwitch(e, v) {
            v.status = Number(!v.status);
            let res = await this.$api.recommend.change({
                recommendId: v.recommendId,
                status: v.status
            });
            if (res.data.code == '200') {
                this.$message.success('操作成功！');
            }
        },
        getDateDefault(time) {
            return time ? moment(time, this.formatDate) : moment();
        },
        tableChange(page) {
            this.pageParams.pageSize = page.pageSize;
            this.pageParams.current = page.current;
            this.getList();
        },
        query() {
            this.getList();
        },
        reset() {
            this.queryParams = this.$options.data().queryParams;
            this.getList();
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        // 增删改查
        add() {
            this.visible = true;
            this.title = '新增';
        },
        edit(record) {
            this.visible = true;
            this.title = '编辑';
            this.$api.recommend.info({ recommendId: record.recommendId }).then(res => {
                this.form = res.data.data;
            });
        },
        del(record) {
            let list = record.recommendId ? [record.recommendId] : this.selectedRowKeys;
            this.$confirm({
                title: '提示',
                content: '确定删除操作数据?',
                onOk: () => {
                    this.$api.recommend.del(list).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success(res.data.message);
                            this.getList();
                        } else {
                            this.$message.warn(res.data.message);
                        }
                    });
                }
            });
        },
        onChange(value) {
            this.form.pushTime = value.format(this.formatDate);
        },
        onOk(value) {
            this.form.pushTime = value.format(this.formatDate);
        },
        handleOk() {
            let item = this.matterList.find(item => this.form.matterId === item.matterId);
            let params = {
                'title': this.form.title,
                'content': this.form.content,
                'matterId': this.form.matterId,
                'pushTime': this.form.pushTime
            };

            if (item) {
                params.matter = item.matter;
            }
            if (this.form.recommendId) { // 编辑ID
                params.recommendId = this.form.recommendId;
            }

            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$api.recommend.save(params).then(res => {
                        if (res.data.code == 200) {
                            this.getList();
                            this.visible = false;
                            this.handleCancel();
                            this.$message.success(res.data.message);
                        } else {
                            this.$message.warn(res.data.message);
                        }
                    }).finally(() => {
                        this.visible = false;
                    });
                }
            });
        },
        handleCancel() {
            this.form = this.$options.data().form;
            this.visible = false;
        },
        // 接口
        getList() {
            let params = {
                pageNum: this.pageParams.current,
                pageSize: this.pageParams.pageSize,
                ...this.queryParams
            };
            this.$api.recommend.list(params).then(res => {
                if (res.data.code === 200) {
                    this.data = res.data.data;
                    this.pageParams.total = res.data.total;
                } else {
                    this.$message.warn(res.data.message);
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.search-h {
	display: flex;
	justify-content: space-between;
	margin: 10px 0 8px;

	/deep/ .ant-form-item {
		margin-bottom: 0px !important;
	}
}

.edit {
	color: #1890ff;
}

.disabled {
	cursor: not-allowed;
	color: #ddd;
}

.btn-group {
	margin-bottom: 12px;
}
</style>
